<template>
  <div class="bodyBox">
    <!-- 顶部 -->
    <div v-if="flag">
      <div>
        <van-nav-bar
          title="个人中心"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
          <template #right>
            <van-icon name="edit" size="22" />
          </template>
        </van-nav-bar>
      </div>
      <!-- 内容 -->
      <div class="contentBox">
        <ul class="contentList">
          <li>
            <span>头像</span>
            <div class="right">
              <li>
                <!-- <span style="color: #646566; font-size: 14px"></span> -->
                <van-uploader multiple :after-read="afterRead">
                  <div class="filedBox">
                    <img
                      :src="$store.state.userInfo.avatar"
                      alt=""
                      style="width: 100%; height: 100%; border-radius: 50%"
                    />
                  </div>
                </van-uploader>
              </li>
            </div>
          </li>
          <li>
            <span>昵称</span>
            <span>{{ $store.state.userInfo.userName || "" }}</span>
          </li>
          <li>
            <span>手机号</span>
            <span>{{ $store.state.userInfo.phonenumber || "" }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 修改个人信息 -->
    <div v-else>
      <div>
        <van-nav-bar
          title="个人中心"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
        </van-nav-bar>
      </div>
      <div class="modifyMine">
        <!-- <ul class="contentList">
          <li>
            <span style="color: #646566; font-size: 14px">头像</span>
            <van-uploader multiple :after-read="afterRead">
              <div class="filedBox">
                <img
                  :src="$store.state.userInfo.avatar"
                  alt=""
                  style="width: 100%; height: 100%; border-radius: 50%"
                />
              </div>
            </van-uploader>
          </li>
        </ul> -->

        <van-cell-group>
          <van-field
            v-model="$store.state.userInfo.userName"
            label="昵称"
            placeholder="请输入用户名"
          />
          <van-field
            v-model="$store.state.userInfo.phonenumber"
            label="手机号"
            placeholder="请输入用户名"
          />
        </van-cell-group>
        <div class="sureREpair">
          <van-button type="primary" @click="onclick">确认修改</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { userInfo, changeAvatar, mineMessage } from "../api/api";
// import { mineMessage, userInfo, changeAvatar, modifyPic } from "../api/api";

export default {
  name: "minePage",
  data() {
    return {
      flag: true,
      value: "",
      userName: "",
      phonenumber: "",
      password: "",
      avatarfile: "",
      minePicture: "",
      seemineMessage: {},
      fileList: [],
      file: "",
    };
  },
  created() {
    // userInfo().then((res) => {
    //   console.log(res);
    //   this.seemineMessage = res.data;
    // });
    // this.$store.dispatch("checkLogin");
  },
  methods: {
    // 修改信息提交
    onclick() {
      //   修改个人信息
      console.log(this.seemineMessage);
      mineMessage(
        this.$store.state.userInfo.userName,
        this.$store.state.userInfo.phonenumber
      ).then((res) => {
        console.log(res);
        this.flag = true;
        this.$store.commit("changeLogin", {
          isLogin: true,
          userInfo: res.data,
        });
        this.flag = true;
        this.$router.push("/mine");
      });
    },
    // 返回
    onClickLeft() {
      this.$router.back;
      window.history.go(-1);
    },
    onClickRight() {
      this.flag = false;

      userInfo().then((res) => {
        this.seemineMessage = res.data;
      });
    },
    // 上传图片
    afterRead(file) {
      // 此时可以自行将文件上传至服务器

      console.log(file);

      // modifyPic(file.file, "AVATAR").then((res) => {
      //   console.log(res);
      changeAvatar(file.file).then((res) => {
        console.log(res);
        userInfo().then((res) => {
          console.log(res);
          // 改为vuex正确修改方式
          // this.$store.state.userInfo.avatar = res.data.avatar;
          this.$store.commit("changeLogin", {
            isLogin: true,
            userInfo: res.data,
          });
        });

        // this.$store.state.userInfo.avatar = res.url;
        // this.file = res.url;
      });
      // });
      //  this.minePicture=avatarfile
    },
  },
};
</script>
<style scoped lang="less">
.contentBox {
  background-color: #f4f4f4;
}
.van-button--primary {
  color: #fff;
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
.van-button {
  height: 44px;
  border-radius: 29px;
  width: 200px;
}
.sureREpair {
  margin-top: 50px;
  text-align: center;
}
.bodyBox {
  background-color: #fff;
}
.filedBox {
  margin-top: -3%;
  width: 54px;
  height: 54px;
  border-radius: 27px;
  // background-color: pink;
}
// 顶部
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/deep/.van-field__label {
  width: 3.2em;
}
// 内容
.right {
  float: right;
  position: absolute;
  top: 0;
  right: 5%;
  width: 14%;
  height: 100%;
  // background-color: red;
  border-radius: 87%;
  clear: both;
  line-height: 100%;
}
.right img {
  width: 100%;
  height: 100%;
  border-radius: 87%;
}
.contentList > li {
  position: relative;
  clear: both;

  margin-bottom: 2px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 5% 5%;
  background-color: #fff;
}
.contentList > li:nth-of-type(1) {
  height: 52px;
  margin-bottom: 4px;
  margin-top: 4px;
}
.contentList > li {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 16px;
  box-sizing: border-box;
  padding: 5% 5%;
}
.logout {
  margin: auto;
}
/deep/.van-button--info {
  background-color: #fff;
  border-color: red;
  color: red;
}
/deep/.van-button--info {
  color: black !important;
}
</style>
